import React, { Fragment } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT, ONE_PIXEL, WIDTH } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CheckButton from 'src/components/check-button'
import CheckDeleteView from 'src/components/check-delete-view'
import BasePage from 'src/pageP/base/base-page/index'
import CustomFlatList from 'src/components/custom-flat-list'
import { showTipModal } from '../../../utils/ModalUtil'

class CommonSelectDelete extends BasePage {
  constructor(props) {
    super(props)
    this.state = {
      header: {},
      dataArr: [],
      checkedIndexes: [],
      selectAll: false,
      isManager: true,
      tipPromptVisible: false,
      pullUp: true,
      pullDown: true,
      isShowBtn: true,
      titleNum: 0 // 一共有多少个
    }
    this.flatListRef = null
    this.deleteText = null
    this.onHeaderRefresh = this.onHeaderRefresh.bind(this)
    this.onFooterRefresh = this.onFooterRefresh.bind(this)
    this.confirmDelete = this.confirmDelete.bind(this)
    this.listEmptyComponent = this.listEmptyComponent.bind(this)
    this.generateItemChild = this.generateItemChild.bind(this)
    this.childItemClick = this.childItemClick.bind(this)
  }

  renderNavigationBarChild() {
    const { isManager, dataArr, isShowBtn } = this.state
    return dataArr.length > 0 && isShowBtn ? (
      <CustomButton style={styles.managerView} onPress={this._changeManager}>
        <Text style={styles.managerText}>{isManager ? '管理' : '完成'}</Text>
      </CustomButton>
    ) : null
  }

  _changeManager = () => {
    const { isManager } = this.state
    this.setState({
      pullDown: !isManager,
      pullUp: !isManager,
      isManager: !isManager,
      checkedIndexes: []
    })
  }

  childRender() {
    console.info('childRender')
    const {
      selectAll, dataArr, isManager, checkedIndexes, pullDown, pullUp, titleNum
    } = this.state
    return (
      <View style={styles.container}>
        <View style={styles.titleView}>
          <Text style={styles.titleText}>{this.titleText}</Text>
          <Text style={styles.titleNumText}>{titleNum}</Text>
        </View>
        <View style={styles.line} />
        <CustomFlatList
          ref={this._customFlatListRef}
          style={styles.flatList}
          data={dataArr}
          pullDown={dataArr.length <= 0 || pullDown}
          pullUp={dataArr.length <= 0 || pullUp}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          onHeaderRefresh={this.onHeaderRefresh}
          onFooterRefresh={this.onFooterRefresh}
          ListEmptyComponent={this.listEmptyComponent()}
        />
        {
          dataArr.length <= 0 || isManager ? null : (
            <Fragment>
              <View style={styles.line} />
              <CheckDeleteView
                checked={selectAll}
                highlight={checkedIndexes.length > 0}
                onCheckedPress={this.selectAll}
                onDeletePress={this.onDelete} />
            </Fragment>
          )
        }
      </View>
    )
  }

  listEmptyComponent() {
  }

  _customFlatListRef = (ref) => {
    this.flatListRef = ref
  }

  renderItem = (itemParams) => {
    const { isManager, checkedIndexes } = this.state
    const { index } = itemParams
    return (
      <View style={styles.itemView}>
        {
          isManager ? null : (
            <CheckButton
              style={styles.selectView}
              checked={checkedIndexes.includes(index)}
              params={{ index }}
              onPress={this.deleteItemCheck} />
          )
        }
        {this.generateItem(itemParams)}
      </View>
    )
  }

  keyExtractor = (item, index) => item.id.toString()

  onHeaderRefresh() { }

  onFooterRefresh() { }

  generateItem = (itemParams) => {
    return (
      <CustomButton style={styles.itemRightView} params={itemParams} onPress={this.itemClick}>
        {this.generateItemChild(itemParams)}
      </CustomButton>
    )
  }

  itemClick = (itemParams) => {
    const { index } = itemParams
    const { isManager, checkedIndexes } = this.state
    if (!isManager) { // 正在管理的时候不允许按
      this.deleteItemCheck({
        index,
        checked: checkedIndexes.includes(index)
      })
    } else {
      this.childItemClick(itemParams)
    }
  }

  /**
   * 每一条的点击
   */
  childItemClick(itemParams) {

  }

  /**
   * 每一项的渲染
   * @param itemParams
   */
  generateItemChild(itemParams) {

  }

  deleteItemCheck = ({ index, checked }) => {
    const { checkedIndexes } = this.state
    let newCheckedIndexes
    if (checked) {
      newCheckedIndexes = checkedIndexes.filter((item) => {
        return item !== index
      })
    } else {
      newCheckedIndexes = checkedIndexes.concat(index)
    }
    this.setState({
      checkedIndexes: newCheckedIndexes
    })
  }

  selectAll = ({ checked }) => {
    const { dataArr } = this.state
    let newCheckedIndexes = []
    if (!checked) {
      newCheckedIndexes = dataArr.map((item, index) => {
        return index
      })
    }
    this.setState({
      selectAll: !checked,
      checkedIndexes: newCheckedIndexes
    })
  }

  onDelete = () => {
    console.info('onDelete')
    const { checkedIndexes } = this.state
    if (checkedIndexes.length > 0) {
      this.tipModal = showTipModal({
        titleLabel: '提醒',
        contentText: `确定要删除选中的${checkedIndexes.length}个${this.deleteText}吗？`,
        onCancel: this.onTipCancel,
        onConfirm: this.onTipConfirm
      })
    }
  }

  onTipCancel = () => {
    this.tipModal.close()
  }

  onTipConfirm = () => {
    this.tipModal.close(this.confirmDelete)
  }

  // 确认删除
  confirmDelete() {

  }
}

export default CommonSelectDelete

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  managerView: {
    width: ScaleS(58),
    height: ScaleS(28),
    borderRadius: ScaleS(14),
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: '#000000',
    borderWidth: ScaleS(1),
    borderStyle: 'solid',
    alignSelf: 'flex-end',
    marginRight: ScaleS(20)
  },
  managerText: {
    color: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '600'
  },
  titleView: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginTop: ScaleS(30),
    marginLeft: ScaleS(20),
    marginBottom: ScaleS(30)
  },
  titleText: {
    color: '#444444',
    fontSize: ScaleT(25),
    fontWeight: '600'
  },
  titleNumText: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: 'bold',
    marginLeft: ScaleS(5)
  },
  line: {
    height: ONE_PIXEL,
    backgroundColor: '#EFEFEF'
  },
  flatList: {
    flex: 1
  },
  itemView: {
    // height: ScaleS(122),
    flexDirection: 'row'
  },
  itemRightView: {
    width: WIDTH
  },
  selectView: {
    paddingTop: ScaleS(38),
    paddingLeft: ScaleS(20)
  },
  selectIconView: {
    width: ScaleS(20),
    height: ScaleS(20),
    borderColor: '#979797',
    borderRadius: ScaleS(10),
    borderWidth: ScaleS(1),
    borderStyle: 'solid'
  },
  selectedIconView: {
    width: ScaleS(22),
    height: ScaleS(22),
    backgroundColor: '#000000',
    borderRadius: ScaleS(11),
    justifyContent: 'center',
    alignItems: 'center'
  },
  selectedIconImg: {
    width: ScaleS(12),
    height: ScaleS(8)
  },
  itemContentView: {
    width: WIDTH,
    height: ScaleS(122),
    paddingHorizontal: ScaleS(20),
    paddingTop: ScaleS(35)
  },
  topView: {
    flexDirection: 'row'
  },
  jobTitleView: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  jobTile: {
    color: '#000000',
    fontSize: ScaleT(19),
    fontWeight: '400'
  },
  priceView: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  price: {
    color: '#FFC61C',
    fontSize: ScaleT(24),
    fontWeight: 'bold'
  },
  priceUnit: {
    color: '#444444',
    fontSize: ScaleT(12),
    fontWeight: '500'
  },
  bottomView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(25),
    marginBottom: ScaleS(15)
  },
  tagView: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  tagItemView: {
    paddingVertical: ScaleS(6),
    paddingHorizontal: ScaleS(16),
    borderRadius: ScaleS(16),
    backgroundColor: 'rgba(216,216,216,0.205)'
  },
  tagLabel: {
    color: '#999999',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  dateText: {
    color: '#444444',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  bottomSelectView: {
    height: ScaleS(56),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20)
  },
  allSelectedText: {
    color: '#444444',
    fontSize: ScaleT(15),
    fontWeight: '400',
    marginLeft: ScaleS(11),
    flex: 1
  },
  deleteView: {
    width: ScaleS(72),
    height: ScaleS(40),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
    borderRadius: ScaleS(4)
  },
  deleteText: {
    color: '#FFFFFF',
    fontSize: ScaleT(15),
    fontWeight: '400'
  }
})
